<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        // 点击.box alert 相应下标
        var box=document.getElementsByTagName('box');
        for(var i=0;i<box.length;i++){
            box[i].index=i;
            box[i].onclick=function(){
                alert(this.index)
            }
        }
        /*
            1.let拥有块级作用域
            2.let不存在变量的提前声明
            3.let不能重复声明
            4.let虽然是块级作用域但不影响作用域链
        */ 
       for(let i=0;i<box.length;i++){
           box[i].onclick=function(){
               alert(i)
           }
       }
       {
           let girl='班长';
       }
    //    console.log(girl);
    //    var girl='班长';

    // console.log(yuzong);
    let yuzong='没我帅'

    // let yuzong='比我帅'
    {
        let girl='班长'
        function fn(){
            console.log(girl);
        }
        fn()
    }

    // const常量（值不能被修改的变量叫常量）
    // 潜规则 声明形式除了声明的类型为函数fn外全部大写
    const SCHOOL ='kw06'
    // const 不能被修改---可以修改对象里面或者数组里面的值
    // const 也拥有块级作用域
    // SCHOOL='不是'
    {
        const BOY='DDD'
    }
    const ZHANG=['张明','男人','穷人'];
    ZHANGMING.push('未婚')
    console.log(ZHANGMING);

    function laojiang(a,b=1){
        console.log(a+b);
    }
    laojiang(1,3)

    let name='班长';
    let change=function(){
        console.log('真漂亮');
    }
    // const SCHOOL={
        // name:name,
        // change:change
    // }
    const SCHOOL={name,change}
    console.log(SCHOOL);

    // var fn=function(){}
    // let fn=()=>{}
    const SCHOOL={
        name:'渣男'
    }
    window.name='123'
    console.log(this);
    function getName(){
        console.log(this.name);
    }
    getName()

    let getName2=()=>{
        console.log(this.name);
    }
    getName2()

    getName.call(SCHOOL)
    getName2.call(SCHOOL)

    /*
        箭头函数开始的时候作用域this指向某一对象后就不会改变当前this
        箭头函数不能作为构造函数实例化对象
        箭头函数参数只有一个的话可以省略入参左右的（）
        箭头函数参数里面只有一句话可以省略大括号 return可省略
    */ 
   let Person=(name,age)=>{
       this.name=name;
       this.age=age;
   }
   let zhanan=new Person('王思聪','ooooo')
   console.log(zhanan);
   let fn=q=>q+q;
   console.log(fn(3));

   const DUIXIANG=['蒋富涛','有钱','有老婆']
   let [a,b,c]=DUIXIANG;
   console.log(a,b,c);
//    对象解构给变量
const ZHANG={
    name:'zhang',
    age:'99',
    kanren:function(){
        console.log('我');

    }
}
let {name,age,kanran}=ZHANG;
console.log(name);
console.log(age);
console.log(kanren);
kanren()

const BANZHANG=['1','2']
console.log(...BANZHANG);
// 应用场景
const A=['1','2']
const B=['3','4']
let C=A.concat(B)
console.log(C);
// 深拷贝
const D=[...A];
console.log(D);
D[0]='5'
console.log(D);
console.log(A);
// 将DOM的为数组变成真数组
let divs=document.getElementsByTagName('div')
console.log(divs);
const divArr=[...divs]
console.log(divArr);

let out='徐衍行';
let love=`${out}爱老婆`
console.log(love);

// object.assign()
// 将多个对象的属性和方法都合并到目标对象上面
// 格式（目标对象，后面跟着多个或者一个原对象）
    let target={}
    let name1={
        name:'img',
        age:'123'
    }
    let name2={
        sex:'男'
    }
    let name3={
        sex:'女'
    }
    Object.assign(target,name1,name2,name3);
    console.log(target);
    </script>
</body>
</html>